<html>
<head>
    <title>Reference Genome Service</title>

    <script type="text/javascript" language="javascript" src="https://informatics-apps.systemsbiology.net/protovis-1.0/protovis-r3.2.js"></script>
    <script type="text/javascript" language="javascript" src="https://informatics-apps.systemsbiology.net/prototype-1.6.0.3.js"></script>
    <script type="text/javascript" language="javascript" src="https://informatics-apps.systemsbiology.net/protovis-1.0/visdata.js"></script>
    <script type="text/javascript" language="javascript" src="https://informatics-apps.systemsbiology.net/flexscroll.js"></script>
    <script type="text/javascript" src="js/refgenome.js"></script>

    <script type="text/javascript">
        function loadGenomeBuilds() {
            referenceGenomeService.loadBuilds(function(item) {
                var option = document.createElement("option");
                option.value = item.uri;
                option.innerHTML = item.name;
                Ext.getDom("select_refgenome").appendChild(option);
            });
        }

        function loadChromosomes() {
            referenceGenomeService.loadChromosomes(getSelectedItem("select_refgenome"), function(item) {
                var option = document.createElement("option");
                option.value = item.uri;
                option.innerHTML = item.name;
                Ext.getDom("select_chromosome").appendChild(option);
            });
        }

        function fetchSequence() {
            referenceGenomeService.getSequence(getChromUri(), function(o) {
                Ext.getDom("textarea_results").innerHTML = o.responseText;
            });
        }

        function downloadSequence() {
            document.location.href = getChromUri() + "?outputFilename=sequence.txt";
        }

        function getChromInfo() {
                referenceGenomeService.getChromosomeInformation(getSelectedItem("select_chromosome"), function(item) {
                    drawScrollBar(Ext.getDom("flexContainer"), 0, item.length);
                });
        }

        function getChromUri() {
            var selectedChrom = getSelectedItem("select_chromosome");

            var inputStart = Ext.getDom("input_start").value;
            if (!validNumber(inputStart)) {
                alert("please enter valid number for start");
                return null;
            }

            var inputEnd = Ext.getDom("input_end").value;
            if (!validNumber(inputEnd)) {
                alert("please enter valid number for end");
                return null;
            }

            var intStart = parseInt(inputStart);
            var intEnd = parseInt(inputEnd);
            return selectedChrom + "/" + inputStart + "/" + inputEnd + "/sequence";
        }

        function validNumber(item) {
            if (item == null) {
                return false;
            }
            return !isNaN(parseInt(item));
        }

        function getSelectedItem(selectBoxId) {
            var selectBox = Ext.getDom(selectBoxId);
            return selectBox.options[selectBox.selectedIndex].value;
        }

        Event.observe(window, "load", loadGenomeBuilds);
    
        function drawScrollBar(scrollbarContainer,minPosition,maxPosition) {
                var listener = function(x,dx) {
                    Ext.getDom("input_start").value = x;
                    Ext.getDom("input_end").value = parseInt(x) + parseInt(dx) };

                var activateFetch = function() {
                  fetchSequence();
                };
                scrollbarContainer.style.height ="50px";

                var flexbar = new org.systemsbiology.visualization.protovis.FlexScroll( scrollbarContainer, listener);

                var data ={DATATYPE : "org.systemsbiology.visualization.protovis.models.FlexScrollData", CONTENTS : "test"};

                    var data ={DATATYPE : "org.systemsbiology.visualization.protovis.models.FlexScrollData", CONTENTS : "test"};

                    var options = {plotWidth : 700, plotHeight: 50, dblclick_notifier : zoomScrollBar,
                    verticalPadding : 10, horizontalPadding: 30, font :"sans", minPosition: Math.round(minPosition / 1000) ,
                    maxPosition: Math.round(maxPosition / 1000), scaleMultiplier : 1000};

                flexbar.draw(data, options);

        }

        function zoomScrollBar() {
            Ext.getDom("flexContainer").innerHTML = "";
            drawScrollBar(Ext.getDom("flexContainer"),Ext.getDom("input_start").value,Ext.getDom("input_end").value);
        }
</script>
    
</head>
<body>

<div style="float:left;width:750px">
<br/>Reference Genome:
<select id="select_refgenome">
</select>

<button onclick="loadChromosomes();">Load Chromosomes</button>

<br/>Chromosome:
<select id="select_chromosome" onchange="getChromInfo();">
</select>
<br/>
<div id="flexContainer" style="height:1px;width:720px;"></div>
<br/><div id="flexToolBar" style="font-size:14px">
Units are in Kilo Base pair. <br/> The Selection Window may be moved by dragging the red section.  It may be resized by dragging the blue handles.
    <br/>
    Zoom to the range of the Selection Window by either double-clicking the window or by selecting the "Zoom to Selection" Button below.
    Zoom out to the entire chromosome by using the corresponding button below.
    <br/>
<button onclick="zoomScrollBar();">Zoom to Selection</button>
<button onclick="getChromInfo();">Zoom to Entire Chromosome</button>
</div>

<br/>Start: <input type="text" id="input_start"/>
<br/>End: <input type="text" id="input_end"/>

<br/>
<button onclick="fetchSequence();">Fetch Sequence</button>

<br/>
<button onclick="downloadSequence();">Download Sequence</button>

<br/><textarea id="textarea_results" rows="15" cols="40"></textarea>
    </div>
<div id="help" style="float:left;width:100px">
    <span style="font-size: 12px">
    Step 1:  Select a Reference Genome.  Click the "Load Chromosome" button.<Br/><br/>
    Step 2:  Select the Chromosome of interest from the dropdown list. A scrollbar will load below it.<br/><br/>
    Step 3:  Use the scrollbar and 2 "Zoom" buttons to select a region of the chromosome. The selection window may also
    be double-clicked to enact the "zoom to selection" feature.  Units are in KBp.<br/><br/>
    Step 4:  Opt to Fetch or Download the Reference Genome sequence in the selected range.<br/><br/>
    </span>
</div>
</body>
</html>